<!--  -->
<template>
  <div class="app-container">
    <!-- START 卡片视图 START -->
    <el-card style="margin-bottom: 10px;">
      <!-- START 搜索与添加按扭区域 START -->
      <el-form ref="queryForm" :model="queryParams" :inline="true">
        <el-form-item label="员工姓名" prop="empName">
          <el-input
            v-model="queryParams.empName"
            style="width: 200px"
            size="small"
            placeholder="请输入员工名进行搜索"
            clearable
            @clear="getEmployeeList"
          />
        </el-form-item>
        <el-form-item label="政治面貌" prop="politicsId">
          <el-select v-model="queryParams.politicsId" size="small" style="width: 200px" placeholder="政治面貌">
            <el-option v-for="item in politcList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门" prop="deptId">
          <el-select v-model="queryParams.deptId" style="width: 200px" size="small" placeholder="所属部门">
            <el-option v-for="item in deptList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间" prop="politicsName">
          <el-date-picker
            v-model="beginContract"
            size="small"
            style="width: 260px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            size="mini"
            @click="getEmployeeList"
          >搜索
          </el-button>
          <el-button  icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="primary" plain size="mini" icon="el-icon-plus" @click="openRightDialog">新增</el-button>
          <el-upload
            style="display: inline-flex;"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-success="onSuccess"
            :on-error="onError"
            :disabled="importDataDisabled"
            :headers="headers"
            action="/employee/basic/importData"
          >
              <el-button :disabled="importDataDisabled"  type="success" plain size="mini" :icon="importDataBtnIcon ">{{ importDataBtnText }}</el-button>
          </el-upload>

<el-button  type="warning" plain size="mini" icon="el-icon-download" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
      <!--  END 搜索与添加按扭区域 END -->
    </el-card>
    <!-- END 卡片视图 END -->

    <!-- START员工基本资料表格区域 START -->
    <el-card>
      <el-table
        v-loading="listLoading"
        :data="empBasicList"
        fit
        border
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column fixed="left" label="ID" prop="id" sortable="custom" align="center" width="60">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="left" label="姓名" width="80px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工号" width="90px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.workID }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" width="50px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.gender }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出生日期" width="100px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.birthday }}</span>
          </template>
        </el-table-column>
        <el-table-column label="身份证号码" width="170px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.idCard }}</span>
          </template>
        </el-table-column>
        <el-table-column label="婚姻状况" width="80px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.wedlock }}</span>
          </template>
        </el-table-column>
        <el-table-column label="民族" width="70px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.nation.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="籍贯" width="100px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.nativePlace }}</span>
          </template>
        </el-table-column>
        <el-table-column label="政治面貌" width="120px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.politicsStatus.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电子邮箱" width="180px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话号码" width="120px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系地址" width="340px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属部门" width="120px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.department.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="职称" width="130px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.position.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="聘用形式" width="90px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.engageForm }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最高学历" width="80px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.tiptopDegree }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属专业" width="150px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.specialty }}</span>
          </template>
        </el-table-column>
        <el-table-column label="毕业院校" width="140px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.school }}</span>
          </template>
        </el-table-column>
        <el-table-column label="入职日期" width="120px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.beginDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="在职状态" width="80px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.workState }}</span>
          </template>
        </el-table-column>
        <el-table-column label="入职日期" width="100px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.beginDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="转正日期" width="100px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.conversionTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合同起始日期" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.beginContract }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合同终止日期" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.endContract }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合同期限" width="80px" align="center">
          <template slot-scope="{row}">
            <el-tag>{{ row.contractTerm }}</el-tag>年
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="210" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button  type="primary" icon="el-icon-edit" size="mini" plain round @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button size="mini" icon="el-icon-delete" type="danger" plain round @click="handleDelete(row,$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="totalCount>0" :total="totalCount" :page.sync="queryParams.currPageNo" :limit.sync="queryParams.pageSize" @pagination="getEmployeeList" />
    </el-card>
    <!-- END 员工基本资料表格区域 END -->
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// 从 /api/role.js中解构出 pageRoleList方法，在当前组件中导入
import { pageEmployeeList, getPoliticsList, getDeptList } from '@/api/employee'
// 导入分页公共组件
import Pagination from '@/components/Pagination'
import { getToken } from '@/utils/auth'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    // 在当前组件中进行注册
    Pagination
  },
  data() {
    // 这里存放数据
    return {
      // 用于保存员工的基本资料列表信息
      empBasicList: [],
      // 查询参数
      queryParams: {
        // 当前页码为1
        currPageNo: 1,
        // 每页显示10条数据
        pageSize: 5,
        // 员工名查询条件
        empName: '',
        // 排序字段
        sort: '+id',
        beginTime: '', // 开始时间
        endTime: '', // 结束时间
        deptId: '', // 所属部门
        politicsId: '' // 政治面貌
      },
      // 入职时间
      beginContract: [],
      // 用来保存分页时所需要的总记录数
      totalCount: 0,
      // 当发送异步请求用户列表数据时设置它为true,可出现正在加载中
      listLoading: true,
      // 政治面貌列表，用于绑定政治面貌下拉框
      politcList: [],
      // 所属部门列表，用于绑定所属部门下拉框
      deptList: [],
      importDataBtnText: '导入',
      importDataBtnIcon: 'el-icon-upload2',
      importDataDisabled: false,
      // 为导入请求的请求头添加Authorization字段，其值为token
      headers: {
        // 调用getToken()实现从Cookie中获取token字符串
        Authorization: getToken()
      },

    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getPoliticsList()
    this.getDeptList()
    // 分页查询员工基本资料信息
    this.getEmployeeList()
  },
  // 方法集合
  methods: {
    // 重置查询表单
    resetQuery() {
      // 入职时间进行重置
      this.beginContract = []
      this.queryParams = {
        currPageNo: 1,
        pageSize: 5,
        empName: '', 
        beginTime: '', // 开始时间
        endTime: '', // 结束时间
        deptId: '', // 所属部门
        politicId: '' // 政治面貌
      }
      // 重新查询下员工数量
      this.getEmployeeList()
    },
    // 查询t_politics_status政治面貌表的列表信息
    getPoliticsList() {
      getPoliticsList().then((res) => {
        this.politcList = res
      })
    },
    // 查询t_department部门表的列表信息
    getDeptList() {
      getDeptList().then((res) => {
        this.deptList = res
      })
    },
    // 添加员工按扭的点击事件
    openRightDialog() {},
    // 分页查询员工基本资料信息
    getEmployeeList() {
      // true时，表格中就会出现正在加载图标
      this.listLoading = true
      if (this.beginContract.length > 0) {
        this.queryParams.beginTime = this.beginContract[0]
        this.queryParams.endTime = this.beginContract[1]
      }
      pageEmployeeList(this.queryParams).then((res) => {
        // false时，正在加载图标就会消失
        this.listLoading = false
        this.empBasicList = res.data.list
        // 获取总记录数
        this.totalCount = res.data.totalCount
      }).catch((err) => {
        console.log(err)
        this.$message({
          title: '提示',
          message: '查询基本资料列表失败!',
          type: 'error',
          duration: 2000
        })
      })
    },
    /** [导出数据]按钮的点击事件 */
    handleExport() {
      this.downloadRequest("/employee/basic/export",this.queryParams);
    },
    /** [导入数据]按钮的点击事件 */
    handleImport() {},
    // 导入员工基本资料成功则进入了onSuccess()
onSuccess() {
  this.importDataBtnIcon = 'el-icon-upload2'
  this.importDataBtnText = '导入'
  // 上传成功后<el-upload>标签设置为禁用的
  this.importDataDisabled = false
  // 导入成功后，调用getEmployeeList()查询最新的数据
  this.getEmployeeList()
},
// 导入员工基本资料失败则进入onError
onError() {
  this.importDataBtnIcon = 'el-icon-upload2'
  this.importDataBtnText = '导入'
},
beforeUpload() {
  // 上传文件之前的钩子，
  this.importDataBtnIcon = 'el-icon-loading'
  this.importDataBtnText = '正在导入'
  // 上传前<el-upload>标签设置为启用的
  this.importDataDisabled = true
},

  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
  .el-card__body{
    padding:16px !important;
  }
  .el-form-item {
    margin-bottom: 7px;
  }
  .pagination-container{
    padding: 18px 16px;
  }
</style>